<template>
  <div class="LickTheDog">
    <!-- 舔狗日记 -->
    <myheader title="趣味娱乐" rightBtn="主页" @updataInfo="submitRecruit"></myheader>
    <van-image :src="Photo.cover" @click="seeImg">
      <template v-slot:loading>
        <van-loading type="spinner" size="20" />
      </template>
    </van-image>
    <div class="content">
      <van-divider dashed>每天一摄影,记录生活</van-divider>
      <p style=" text-align: center;margin:0;">{{Photo.subtitle}}</p>

      <span
        style="display:inline-block;text-aligin:center;    text-align: center;
    width: 100%;"
      >{{Photo.make_time}}</span>
      <p>{{Photo.content}}</p>
      <van-tag
        type="success"
        style=" background-color: #efefef !important;
  border: none !important; color:#222 !important;"
        class="tip"
        @click="changeDog"
      >换一篇</van-tag>
    </div>

    <div class="content">
      <van-divider dashed>舔狗日记</van-divider>
      <p>{{dog}}</p>
      <van-tag
        type="success"
        style=" background-color: #efefef !important;
  border: none !important; color:#222 !important;"
        class="tip"
        @click="changeSoup"
      >换一篇</van-tag>
    </div>

    <div class="content">
      <van-divider dashed>心灵毒鸡汤</van-divider>
      <p>{{soup}}</p>
    </div>
  </div>
</template>

<script>
import myheader from '../../../comon/myheader.vue'
import { ImagePreview } from 'vant'
export default {
  components: {
    myheader,
  },
  data() {
    return {
      dog: '',
      soup: '',
      Photo: '',
      img: '',
    }
  },
  created() {
    this.initDog()
    this.initSoup()
    this.initPhone()
  },
  methods: {
    seeImg() {
      ImagePreview([this.img])
    },
    async initDog() {
      const res = await this.$axios.get('https://v2.alapi.cn/api/dog', {
        params: {
          format: 'json',
          token: this.$path.ALAPI_TOKEN,
        },
      })
      if (res.data.code == 200) {
        this.dog = res.data.data.content
      }
    },
    async initSoup() {
      const res = await this.$axios.get('https://v2.alapi.cn/api/dog', {
        params: {
          format: 'json',
          token: this.$path.ALAPI_TOKEN,
        },
      })
      if (res.data.code == 200) {
        this.soup = res.data.data.content
      }
    },
    async initPhone() {
      const res = await this.$axios.get('https://v2.alapi.cn/api/one/photo', {
        params: {
          date: '2021-09-23',
          token: this.$path.ALAPI_TOKEN,
        },
      })
      if (res.data.code == 200) {
        this.Photo = res.data.data
        this.img = res.data.data.cover
      }
    },
    changeDog() {
      this.initDog()
    },
    changeSoup() {
      this.initSoup()
    },
  },
}
</script>

<style scoped>
.LickTheDog {
  margin-top: 75px;
}

p {
  font-size: 16px;
  padding: 0.6rem 0.5rem;
  margin: 15px 0 !important;
  font-size: 17px;
  color: #616466;
  text-indent: 2em;
}
.content {
  font-size: 17px;
  color: #616466;
  margin: 10px 0 20px;
  position: relative;
  margin: 45px 0;
}
.tip {
  position: absolute;
  right: 2%;
  font-size: 16px;
  padding: 7px;
  bottom: -24px;
}
</style>